<template>
	<view class="bg-l">


		<template>
			<view class="flex a-c j-c cff" style="padding-top: 150rpx;">
				<text class="map-w">{{name}}</text>
			</view>
			<view class="flex a-c j-c cff pt2" style="letter-spacing: 2px;">
				<text>我走过 {{sheng}} 个省， {{shi}} 个城市</text>
			</view>
			<view class="flex a-c j-c cff pt2">
				<text>超越了 {{proportion}} 的用户</text>
			</view>
		</template>

		<view style="width: 750rpx;height: 750rpx;">
			<qiun-data-charts v-show="!is_img_shows" ref="qiunc"
				style="width: 750rpx;height: 750rpx;padding-top: 80rpx;" type="map" :canvas2d="false" :opts="config"
				canvasId="firstCanvas" :chartData="chartsDataMaps" :tapLegend="false" :tooltipShow="false"
				tooltipFormat="tooltipFun" @getIndex="getIndex" />
		</view>
		<view class="flex j-s a-c">

			<button class="f-26 map-but" @click="on_addr">继续添加</button>
			<button class="f-26 map-but" @click="saveClick">生成图片</button>
		</view>
		<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" :height="height"
			:width="width" />
		<view class="" v-if="is_img_shows">
			<view class="mask"></view>
			<view class="haibao3">
				<view class="weixin1">
					<image style="height: 600rpx;border-radius: 5rpx;" :src="canvasUrl1" mode="heightFix"></image>
				</view>
				<view class="flex j-c a-c">
					<view @click="on_save()" class="btnh">保存到相册</view>
					<view @click="on_close()" class="btnh" style="background-color: #82848A;">关闭</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js'
	import $plugin from '@/common/plugin/luyouzujiditu/luyouzujiditu.js';
	import lhSelectCity from '@/components/LW-CityMultiSelect/city-select.vue'
	import mosoweCanvasImage from "@/components/mosowe-canvas-image/wxqrcode.js"
	export default {
		components: {
			lhSelectCity

		},
		data() {
			return {

				chartsDataMaps: {
					series: []
				},
				config: {
					extra: {
						map: {
							mercator: true
						}
					}
				},
				lists: [],
				height: 800,
				width: 500,
				canvasUrl1: "",
				sheng: 0,
				shi: 0,
				is_img_shows: false,
				proportion: '',
				name: ""



			}
		},

		onShareAppMessage(res) {
			return {
				title: "我的旅行足迹",
				path: '/pages/luyouzujiditu/map_log/map_log'
			}
		},

		onShareTimeline(res) {
			return {
				title: "我的旅行足迹",
				path: '/pages/luyouzujiditu/map_log/map_log'
			}
		},

		onLoad(on) {
			var that = this;
			that.allArr = JSON.parse(on.allArr);
			that.cityArr = JSON.parse(on.cityArr);
			that.shi = that.cityArr.length;
			that.sheng = that.allArr.length;

			this.init();

		},


		methods: {
			on_addr() {
				uni.navigateBack()

			},
			getIndex(e) {

			},
			getServerData() {
				this.mapjson = this.get_map_json;

				let mapseries = this.mapjson.features.map((item) => {
					var is = this.is_name_true(item.properties.name);
					if (is) {
						item.color = '#FFD700';
					}
					return item
				})
				this.chartsDataMaps.series = mapseries
			},
			_canvasImage(e) {
				this.canvasUrl1 = e;
				this.is_img_shows = true;
			},
			on_close() {
				this.is_img_shows = false;
			},
			//判断是否包含
			is_name_true(name) {
				var isSubstringIncluded = false
				for (var i = 0; i < this.allArr.length; i++) {
					isSubstringIncluded = this.allArr[i]["name"].includes(name);
					if (isSubstringIncluded) {
						return isSubstringIncluded;
					}
				}
				return isSubstringIncluded;
			},
			async saveClick() {
				var that = this
				var rer = await this.$refs.qiunc.wxImage()
				that.onsc(rer);
			},
			on_save() {
				// #ifdef H5
				uni.showToast({
					title: "请长按图片保存",
					icon: 'none'
				})
				return
				// #endif
				// 保存图片到相册


				uni.saveImageToPhotosAlbum({
					filePath: this.canvasUrl1,
					success: function() {
						console.log('图片保存成功');
						uni.showToast({
							title: "图片保存成功",
							icon: 'none'
						})
						// 成功处理逻辑
					},
					fail: function(err) {

						if (err.errMsg == "saveImageToPhotosAlbum:fail cancel") {
							return
						}
						// #ifdef MP-WEIXIN
						wx.showModal({
							title: '提示',
							content: '需要您授权保存相册',
							showCancel: false,
							success: modalSuccess => {
								wx.openSetting({
									success(settingdata) {
										console.log("settingdata", settingdata)
									},
									fail(failData) {
										console.log("failData", failData)
									},
									complete(finishData) {
										console.log("finishData", finishData)
									}
								})
							}
						})
						// #endif
					}
				});
			},
			onsc(img) {
				this.lists = []
				var that = this;
				uni.showLoading({
					title: '正在生成图片...',
					mask: true
				});

				var addr = {
					type: 'image',
					content: img,
					width: 400,
					height: 400,
					x: 0,
					y: 180,
					align: "center",
					c_width: 500
				}


				this.lists.push(addr);

				this.lists = this.hai_bao.concat(this.lists);

				setTimeout(function() {
					that.listoz()
				}, 1000);

			},
			listoz() {
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			async init() {
				let that = this;
				let requestParams = {
					shi: this.shi,
					sheng: this.sheng,
				};
				const ret = await this.Http.post('/plugin.php/luyouzujiditu/api/Settings/top', requestParams)
				if (ret.status == 200) {
					this.proportion = ret.data.proportion + "%";
					this.h5_url = ret.data.url
					this.hai_bao = ret.data.haibao


					that.is_init = true;
					this.name = ret.data.name

					uCharts.map = {
						"type": "map",
						"canvasId": "",
						"canvas2d": true,
						"background": "",
						"animation": true,
						"timing": "easeOut",
						"duration": 1000,
						"color": ['#C0C0C0'],
						"padding": [0, 0, 0, 0],
						"fontSize": 6,
						"rotate": false,
						"errorReload": true,
						"fontColor": "#2F221B",
						"enableScroll": false,
						"touchMoveLimit": 60,
						"enableMarkLine": false,
						"dataLabel": true,
						"dataPointShape": false,
						"dataPointShapeType": "solid",
						"tapLegend": false,
						"extra": {
							"map": {
								"border": true,
								"mercator": false,
								"borderWidth": 0.3,
								"borderColor": "#fff",
								"fillOpacity": 0.6,
								"activeBorderColor": "#ccc",
								// "activeFillColor": "#2F221B",
								"activeFillOpacity": 1
							}
						}
					}

					this.getServerData()

				}
			},


		}
	}
</script>

<style lang="scss">
	button {
		border: 0;
		background: transparent;
	}

	.weixin1 {
		margin: 20px 0 0 0px;
		text-align: center;

	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 887;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.haibao3 {
		position: fixed;
		top: 10%;
		z-index: 888;
		width: 90%;
		left: 5%;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx 0rpx;
	}

	.btnh {
		width: 200rpx;
		margin: 20rpx;
		margin-top: 40rpx;
		padding: 10rpx 0px;
		text-align: center;
		background: #4884FF;
		border-radius: 34px;
		font-size: 30rpx;
		color: #fff;
	}

	.map-w {
		color: #FFFF00;
		font-weight: 800;
		font-size: 36rpx;
		letter-spacing: 4px;
	}

	.map-but {
		border: solid 2rpx #FFFF00;
		color: #FFFF00;
	}
</style>